<template>
	<view>
		<scroll-view>
			<view class="image-container">
				<image :src="imageUrl" @tap="previewImage" mode="widthFix" class="preview-image"></image>
			</view>
		</scroll-view>
		<view class="cu-tabbar-height margin-top"></view>
	</view>
</template>

<script>
	import { getCurrentInstance } from 'vue'
	
	export default {
		data() {
			return {
				imageUrl: "https://s2.loli.net/2025/02/21/fHneAFzv5X1Ry7m.jpg",
				msgCount: 0,
				dot: {
					mailHome: false
				}
			}
		},
		mounted() {
			// 在mounted中获取实例
			this.instance = getCurrentInstance()
		},
		methods: {
			goPage(page) {
				if (!page) {
					return false;
				}
				console.log("pageName", page)
				
				// 使用新的路由系统
				if (this.instance && this.instance.proxy && this.instance.proxy.$router) {
					this.instance.proxy.$router.push(page)
				} else if (this.$router) {
					this.$router.push(page)
				} else {
					// 降级到直接使用uni.navigateTo
					console.log('路由插件未加载，使用uni.navigateTo')
					uni.navigateTo({
						url: `/pages/${page}/index`,
						fail: (err) => {
							console.error('页面跳转失败:', err)
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							})
						}
					})
				}
			},
		}
	}
</script>

<style>
	.cu-list.grid>.cu-item {
		padding: 0px 0px;
	}

	.line2-icon {
		width: 60px;
		height: 60px;
	}

	.image-container {
		padding: 20rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.preview-image {
		width: 100%;
		height: 500rpx !important;
		/* 强制保持高度 */
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		object-fit: cover;
		/* 保持图片填充整个容器 */
	}

	.preview-image:active {
		opacity: 0.8;
	}
</style>